<script setup lang="ts">
// withDefaults赋默认值
// 父传子 父组件通过Props将数据传递给子组件
// 子组件通过defineProps接收
const props = withDefaults(defineProps<{
  count: number
  house:string
}>(),{house:'房子'})
// 注意在这里使用必须定义变量，然后以对象的形式使用
console.log(props.count);

// 子传父 
//  1.需要子定义事件 来告诉父发生改变
const emit = defineEmits<{
  (e:'change-count',count:number):void
  (e:'change-house',house:string):void
}>()

</script>

<template>

  <div class="app-page">{{ count }}
     <div>
      {{  house }}
     </div>
     <!-- 2.子发送事件以及参数 -->
     <button @click="emit('change-count',200)">点击改变count</button>
     <button @click="emit('change-house','大房子')">换房子</button>
  </div>
</template>

<style lang="css" scoped></style>

